<script setup>
import { watch, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const isShowTabber = ref(true);
const tabbarPagesPath = ["/home", "/topic", "/category", "/cart", "/mine"];
watch(
  () => route.path,
  (newVal, oldVal) => {
    // console.log("newVal=>", newVal);
    // console.log("oldVal=>", oldVal);
    if (tabbarPagesPath.includes(newVal)) {
      isShowTabber.value = true;
    } else {
      isShowTabber.value = false;
    }
  }
);

var userInfo = {
  openId: "66", // 写自己的手机号
  nickName: "赵六",
  avatarUrl:
    "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIbWFEIJj8IpGeHM7dGic1aTFZALjWcMm9ltWfFiaQfVRYticWBfgGfzXWMt2EkJWiaicPtftHAlWxUibxQ/132",
};

var openId = userInfo.openId;
// 存在本地
localStorage.setItem("userInfo", JSON.stringify(userInfo));
localStorage.setItem("openId", openId);
</script>

<template>
  <div>
    <RouterView></RouterView>
    <van-tabbar
      v-if="isShowTabber"
      route
      active-color="#CEA62A"
      inactive-color="#A8A8A8"
    >
      <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/topic" icon="description-o"
        >专题</van-tabbar-item
      >
      <van-tabbar-item replace to="/category" icon="apps-o"
        >分类</van-tabbar-item
      >
      <van-tabbar-item replace to="/cart" icon="cart-o">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/mine" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped></style>
